<template>
  <div>
    <div class="header" v-show="isVisable">
      <div class="more">{{ movies.title }}</div>
    </div>
    <van-icon name="arrow-left" @click="$router.go(-1)" />
    <div class="container">
      <img :src="movies.pic" alt="" />
      <div class="describe">
        <span class="title"> {{ movies.title }} </span>
        <span>
          <div class="raiting">{{ movies.raiting }}分</div> </span
        ><br />
        <span>{{ labels[0] }} </span>
        <span>{{ labels[1] }} </span>
        <span>{{ labels[2] }} </span>
        <br />
        <span> {{ movies.slogo }} </span><br />
      </div>
    </div>
    <a href=""><div class="footer">选座购票</div></a>
  </div>
</template>

<script>
import DetailHttp from '../../models/DetailHttp.js';

export default {
  data() {
    return {
      isVisable: false,
      movies: {},
      labels: [],
    };
  },
  /* created() {
    window.addEventListener('scroll', this.widowScrollListener);
  } */
  async activated() {
    var title = this.$route.query.title;
    var result = await DetailHttp.getDetail(title);
    this.movies = result.data.result;
    this.labels = this.movies.labels;
    console.log(this.movies.title);
    window.addEventListener('scroll', this.widowScrollListener);
  },
  deactivated() {
    window.removeEventListener('scroll', this.widowScrollListener);
  },
  methods: {
    widowScrollListener() {
      var scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= 200) {
        this.isVisable = true;
      }
      if (scrollTop < 200) {
        this.isVisable = false;
      }
    },
  },
};
</script>

<style scoped>
.header {
  position: fixed;
  width: 900px;
  height: 50px;
  background-color: #fff;
}
.van-icon-arrow-left:before {
  position: fixed;
  margin-left: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.733);
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  top: 25px;
  transform: translateY(-50%);
}
::v-deep .van-icon {
  display: block;
}
.header .more {
  text-align: center;
  line-height: 50px;
  z-index: 1000;
}
.container {
  margin-bottom: 60px;
}
.container img {
  width: 100%;
  vertical-align: middle;
}
.describe {
  margin: 15px;
  font-size: 15px;
}
.describe .title {
  font-size: 25px;
  color: black;
}
.describe .raiting {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  color: orange;
}
.footer {
  position: fixed;
  bottom: 0px;
  width: 900px;
  height: 50px;
  background-color: orangered;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
span {
  color: #999;
}
</style>
